<!-- 专家问答页面组件 -->
<template>
  <!-- 专家问答页面的整体容器 -->
  <div class="expert-question-container">
    <!-- 遍历问题列表，渲染每个问题项 -->
    <div v-for="(item,index) in questionArray" :key="index" class="question-item">
      <!-- 问题内容区域 -->
      <div class="question-content">
        <!-- 问题标题 -->
        <div class="title">{{ item.title }}</div>
        <!-- 问题内容 -->
        <div class="content">{{ item.question }}</div>
        <!-- 问题相关信息容器 -->
        <div class="item-container">
          <!-- 专家角色时显示提问者信息 -->
          <div class="item-content marginR30" v-if="role==='expert'">提问者：<span
              class="item-text">{{ item.questioner }}</span></div>
          <!-- 专家角色时显示提问者联系方式 -->
          <div class="item-content marginR30" v-if="role==='expert'">提问者联系方式：<span
              class="item-text">{{ item.phone }}</span></div>
          <!-- 提问者角色时显示专家姓名 -->
          <div class="item-content marginR30" v-if="role==='questioner'">专家姓名：<span
              class="item-text">{{ item.expertName }}</span></div>
          <!-- 显示问题状态，未回答为红色标签，已回答为绿色标签 -->
          <el-tag :type="item.status === 0 ? 'danger':'success'" size="mini">
            {{ item.status === 0 ? '未回答' : '已回答' }}
          </el-tag>
        </div>
      </div>
      <!-- 问题操作按钮区域 -->
      <div class="question-btn">
        <!-- 点击查看问题详情 -->
        <div class="btn-text" @click="handleDetail(item)">详情</div>
        <!-- 提问者角色且问题未回答时可修改问题 -->
        <div class="btn-text" @click="handleEdit(item)" v-if="role==='questioner'">修改</div>
        <!-- 专家角色时可回答问题 -->
        <div class="btn-text" @click="handleEdit(item)" v-if="role==='expert'">回答</div>
        <!-- 点击删除问题 -->
        <div class="btn-text" @click="delQuestion(item)">删除</div>
      </div>
    </div>
    <!-- 问题详情对话框 -->
    <el-dialog title="详情" :visible.sync="showDetail" width="600px" :before-close="detailClose">
      <div>
        <!-- 显示问题标题 -->
        <div class="detail-item">
          <div class="item-title">问题标题：</div>
          <div class="item-content">{{ detailObj.title }}</div>
        </div>
        <!-- 显示问题内容 -->
        <div class="detail-item">
          <div class="item-title">问题内容：</div>
          <div class="item-content">{{ detailObj.question }}</div>
        </div>
        <!-- 提问者角色时显示专家姓名 -->
        <div class="detail-item" v-if="role==='questioner'">
          <div class="item-title">专家姓名：</div>
          <div class="item-content">{{ detailObj.expertName }}</div>
        </div>
        <!-- 显示问题状态 -->
        <div class="detail-item">
          <div class="item-title">问题状态：</div>
          <el-tag type="danger" size="mini">{{ detailObj.status === 0 ? '未回答' : '已回答' }}</el-tag>
        </div>
      </div>
      <!-- 对话框底部按钮，点击关闭对话框 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDetail = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改/回答问题对话框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="650px" :before-close="closeRevise">
      <div>
        <!-- 显示问题标题 -->
        <div class="detail-item">
          <div class="item-title">问题标题：</div>
          <div class="item-content">{{ detailObj.title }}</div>
        </div>
        <!-- 专家角色或问题已回答时显示只读问题内容 -->
        <div class="detail-item" v-if="role==='expert'||detailObj.status === 1">
          <div class="item-title">内容：</div>
          <div class="item-content">{{ detailObj.question }}</div>
        </div>
        <!-- 提问者角色且问题未回答时可编辑问题内容 -->
        <el-form ref="form" :model="detailObj" label-width="60px" v-if="role==='questioner'&&detailObj.status === 0">
          <el-form-item label="内容：">
            <el-input type="textarea" v-model="detailObj.question"></el-input>
          </el-form-item>
        </el-form>
        <!-- 提问者角色时显示问题回答 -->
        <div class="detail-item" v-if="role==='questioner'">
          <div class="item-title">回答：</div>
          <div class="item-content">{{ detailObj.answer }}</div>
        </div>
        <!-- 专家角色时可编辑问题回答 -->
        <el-form ref="form" :model="detailObj" label-width="60px" v-if="role==='expert'">
          <el-form-item label="回答：">
            <el-input type="textarea" v-model="detailObj.answer"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 对话框底部按钮，取消或提交修改/回答 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeRevise">取 消</el-button>
        <el-button type="primary" @click="submitRevise">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入获取问题列表、修改问题和删除问题的 API
import {selectQuestionByUser, reviseQuestionByUserId, delQuestionByUserId} from '@/api/question'

export default {
  // 组件的数据属性
  data() {
    return {
      questionArray: [], // 存储问题列表
      showDetail: false, // 控制问题详情对话框的显示与隐藏
      dialogVisible: false, // 控制修改/回答问题对话框的显示与隐藏
      role: "", // 当前用户角色，'expert' 或 'questioner'
      title: "", // 修改/回答问题对话框的标题
      detailObj: {
        title: '',
        question: '',
        answer: '',
        address: '',
        area: '',
        expertName: '',
        plantCondition: '',
        plantDetail: '',
        plantName: '',
        questioner: '',
        soilCondition: '',
        status: 1
      } // 存储当前问题的详细信息
    }
  },
  // 组件的方法
  methods: {
    // 获取问题列表
    getData() {
      // 根据 store 中的 isExpert 判断用户角色
      this.role = this.$store.getters.isExpert ? 'expert' : 'questioner'
      console.log('role', this.role)
      // 调用 API 获取对应角色的问题列表
      selectQuestionByUser({role: this.role}).then(res => {
        console.log('res', res)
        this.questionArray = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除问题
    delQuestion(item) {
      // 弹出确认删除对话框
      this.$confirm('确认删除该行信息？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用 API 删除问题
        delQuestionByUserId({id: item.id}).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          // 删除成功后重新获取问题列表
          this.getData()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        // 用户取消删除操作
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 查看问题详情
    handleDetail(item) {
      this.showDetail = true
      // 复制问题信息到 detailObj
      this.detailObj = Object.assign({}, {...item})
    },
    // 关闭问题详情对话框
    detailClose() {
      this.showDetail = false
    },
    // 打开修改/回答问题对话框
    handleEdit(item) {
      if (this.role === 'questioner') {
        this.title = "修改";
      } else {
        this.title = "回答";
      }
      this.dialogVisible = true
      // 复制问题信息到 detailObj
      this.detailObj = Object.assign({}, {...item})
    },
    // 关闭修改/回答问题对话框
    closeRevise() {
      this.dialogVisible = false
    },
    // 提交修改/回答
    submitRevise() {
      if (this.role === 'expert') {
        // 专家回答问题后将问题状态设为已回答
        this.detailObj.status = 1
      } else {
        // 提问者修改问题后将问题状态设为未回答
        this.detailObj.status = 0
      }
      // 调用 API 修改问题信息
      reviseQuestionByUserId(this.detailObj).then(res => {
        this.$message.success('修改成功！')
        this.dialogVisible = false
        // 提交成功后重新获取问题列表
        this.getData()
      }).catch(err => {
        console.log(err)
      })
    }
  },
  // 组件挂载后执行的操作
  mounted() {
    // 更新用户当前激活的导航索引
    this.$store.commit("updateUserActiveIndex", "4-1");
    // 获取问题列表
    this.getData()
  }
}
</script>

<style lang="less" scoped>
/* 专家问答页面整体样式 */
.expert-question-container {
  width: 900px;
  min-height: 100%;
  background: #fff;
  /* 单个问题项样式 */

  .question-item {
    border: 1px solid #f2f2f2;
    border-radius: 6px;
    padding: 10px 20px;
    margin: 10px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* 问题内容区域样式 */

    .question-content {
      width: 650px;
      /* 问题标题样式 */

      .title {
        font-weight: bold;
        font-size: 18px;
        line-height: 30px;
        height: 30px;
      }

      /* 问题内容样式 */

      .content {
        line-height: 25px;
        height: auto;
        word-break: break-all;
      }

      /* 问题相关信息容器样式 */

      .item-container {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 12px;
        line-height: 20px;
      }

      /* 右侧有 30px 边距的样式 */

      .marginR30 {
        margin-right: 30px;
      }

      /* 信息文本样式 */

      .item-text {
        color: #666;
      }
    }

    /* 问题操作按钮区域样式 */

    .question-btn {
      display: flex;
      /* 按钮文本样式 */

      .btn-text {
        height: 25px;
        cursor: pointer;
        margin-right: 10px;
        color: #67C23A;

        &:hover {
          color: #035D1C;
          text-decoration: underline;
        }
      }
    }
  }

  /* 详情项样式 */

  .detail-item {
    display: flex;
    line-height: 30px;
    /* 详情内容样式 */

    .item-content {
      line-height: 30px;
      height: auto;
      width: 480px;
    }

    /* 详情标题样式 */

    .item-title {
      width: 80px;
      height: 30px;
      font-weight: bold;
      color: #333;
    }
  }
}
</style>